<template>
  <view>
    <uni-search-bar
      class="search-bar"
      placeholder="搜索"
      @confirm="searchAction"
      @clear="clearAction"
      cancelButton="none"
      radius="30"
      v-model="searchText"
    />
    <view class="goods_container">
      <view
        class="goods_cell"
        v-for="item in searchList"
        :key="item.goods_id"
        @click="goodsAction(item.goods_id)"
      >
        <text class="tetx-view">{{ item.goods_name }}</text>
        <uni-icons type="arrowright" size="18"></uni-icons>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchText: "",
      searchList: [],
    }
  },

  methods: {
    async searchAction() {
      if (this.searchText.length) {
        const value = await this.$http.goodsQsearch({
          query: this.searchText,
        })
        this.searchList = value
      }
    },

    goodsAction(goods_id) {
      this.$mrouter.push("/pages/detail/index", goods_id)
    },

    clearAction() {
      this.searchList = []
    },
  },
}
</script>

<style lang="scss" scoped>
.search-bar {
  position: fixed;
  top: var(--window-top);
  left: 0;
  right: 0;
  background-color: #c00000;

  ::v-deep .uni-searchbar {
    padding: 20rpx;
  }

  ::v-deep .uni-searchbar__box {
    height: 60rpx;
  }
}

.goods_container {
  margin-top: 100rpx;
  .goods_cell {
    display: flex;
    align-items: center;
    padding: 20rpx;
    line-height: 65rpx;
    text-align: center;
    font-size: 26rpx;

    .tetx-view {
      flex: 1;
      white-space: nowrap;
      word-break: keep-all;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
</style>
